<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来使用，不能当做方法来调用，不能加小括号 -->
    <input type="text" v-model.lazy="xing">
    <span>+</span>
    <input type="text" v-model.lazy="ming">
    <span>=</span>
    <input type="text" v-model.lazy="fullName">

  </div>
</template>

<script>
export default {
data:() =>({
    xing:'张',
    ming:'三'
}),
// 计算属性，要写到和data 平级的computcd 中
computed:{
  // 所有的计算属性，都放到这里 (计算属性 必须返回计算的结果)
  // fullName(){
  //  return this.xing + ' ' + this.ming
  // }

  // 如果需要修改计算属性的值，需要写成对象格式，（对象中要写 get 和set方法 
  fullName:{
    // 当使用计算属性的时候 ，get就执行了
    get(){
      return this.xing + ' ' + this.ming
    },
    // 当修改计算属性的时候， set就执行了，形参就是修改后的结果
    set(val){
      // console.log(val);
      let arr = val.split(' ')
      this.xing = arr[0]
      this.ming = arr[1]
    }
  }
},
}
</script>

<style>

</style>